<template>
	<view class="box-notice">
		<BgLinear />
		<FixedFun />

		<BackBar title="公告" />

		<scroll-view class="scroll-view" scroll-y="true">
			<view class="box-content">
				<view class="content" v-for="item in arr_notice.value" :key="item.id">
					<view class="text">
						{{ item.text }}
					</view>
					<view class="desc">
						<view class="create-time">
							<text>发布于：</text>
							<uni-dateformat :date="item.create_time" :threshold="[0, 432000000]" />
						</view>
						<view class="reading">阅读量：{{ item.readQuantity }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<Barload :status="barload_status" />
	</view>
</template>

<script setup>
import { reactive, ref, onBeforeMount } from 'vue'
import { get_index_notice } from '../../api'
import { onReachBottom, onPageScroll } from '@dcloudio/uni-app'

const barload_status = ref('loading')
const arr_notice = reactive({ value: [] })
let page = 1

// 实现思路是，看请求得到的数据是不是之前少了，少了那就说明没有了，下次触底就不请求
const show_is_end = ref(false)

const api_get_index_notice = async function (is_add = false) {
	if (barload_status.value == 'no-more') return

	let res = await get_index_notice(page, 6)

	if (res.data.length < 6) barload_status.value = 'no-more'

	res.data.forEach((item, index) => {
		let temp_date = new Date(item.create_time)
		res.data[index].create_time = temp_date
	})

	if (is_add) {
		arr_notice.value = [...arr_notice.value, ...res.data]
	} else {
		arr_notice.value = res.data
	}

	page++
}

onBeforeMount(() => {
	api_get_index_notice()
})

onReachBottom(() => {
	api_get_index_notice(true)
})

onPageScroll(() => {})
</script>

<style lang="scss" scoped>
.scroll-view {
	font-size: 32rpx;
	.box-content {
		@extend .f-c-c-n;
		flex-direction: column;
		.content {
			border: 1rpx solid #eee;
			border-radius: 15rpx;
			box-shadow: 0 0 20rpx #bdbdbd;
			// margin: 10rpx 10rpx 50rpx 10rpx;
			margin-top: 10rpx;
			margin-bottom: 50rpx;
			padding: 25rpx;

			.text {
				word-wrap: break-word;
				width: 600rpx;
				&::before {
					content: '';
					display: inline-block; /* 让 width 生效 */
					width: 30rpx; /* 指定宽度 */
				}
			}
			.desc {
				margin-top: 20rpx;
				@extend .f-c-c-n;
				justify-content: space-between;
				.create-time {
					font-size: 26rpx;
					color: #888;
				}
				.reading {
					font-size: 26rpx;
					color: #009600;
				}
			}
		}
	}
}
</style>
